//除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。
import {
    mapGetters
  } from 'vuex'
  
  export default {
    // 监听页面显示钩子=>只执行一次,所以数量发生改变的时候,tab栏购物车数量不同时变化
    onShow() {
      // 调用徽章方法
      this.setBadge()
    },
    watch:{
      // 监听数量的变化=>重新调用徽章的方法
      total(){
        this.setBadge()
      }
    },
    methods: {
      // 对购物车右上角徽章进行动态设置
      setBadge() {
        uni.setTabBarBadge({
          index: 2, //需要设置徽章的那一项索引
          // 对数字进行隐式转换
          text: this.total + '' //设置的文本,要求是字符串
        })
      }
    },
    
    computed: {
      // 将加入购物车总数映射进来
      ...mapGetters('m_cart', ['total'])
    }
  }
